<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--
v-model 创建双向数据绑定

mv

model (数据)
view  (视图)
model -> view -> model
mvvm

v-model.trim=""
v-model.number=""
v-model.lazy=""
-->
<div id="app">
  <h1>count: {{ count }}</h1>
<!--  <input type="text" v-model.number="num">-->
<!--  <input type="text" v-model.trim="username">-->
  <!--
  <input
    v-model.lazy="message"
    placeholder="edit me"
    @keyup.enter="handleSubmit"
  >
  <p>Message is: {{ message }}</p>-->
  <!--
  <p style="white-space: pre-line;">{{ message }}</p>
  <textarea v-model="message"></textarea>
  -->
<!--  <button @click="handleSubmit">submit</button>-->

  <!--
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  -->
  <!--
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
  -->

  <!--
  <input type="radio" id="one" value="1" v-model="picked">
  <label for="one">男</label>
  <br>
  <input type="radio" id="two" value="0" v-model="picked">
  <label for="two">女</label>
  <br>
  <span>Picked: {{ picked }}</span>
  -->

  <!--
  <select v-model="city">
    <option value="">&#45;&#45;&#45;&#45;</option>
    <option value="6101">西安</option>
    <option value="6102">咸阳</option>
    <option value="6103">渭南</option>
    <option value="6104">汉中</option>
  </select>-->

  <button @click="handleSubmit">submit</button>
</div>
<script src="vue.js"></script>
<script>

  const app = new Vue({
    data: {
      username: '',
      num: 12,
      city: '',
      picked: '0',
      checkedNames: ['John'],
      checked: true,
      count: 1,
      message: 'hello model'
    },
    methods: {
      handleSubmit() {

        console.log(this.username)
        console.log(this.username.length)

        // console.log(typeof this.num)
        // console.log(this.num)

        // console.log(this.city)
        // console.log(this.picked)
        // console.log(this.checkedNames)
        // console.log(this.message)
        // this.message = ''
      }
    }
  }).$mount('#app')

</script>


</body>
</html>